<template>
    <div >
      <a-drawer
      width="1100"
      :maskClosable="false"
      :visible="dialogData.show"
      direction="rtl"
      @close="handleClose">
        <div slot="title">
          <span>新建认领记录</span>
        </div>
        <el-row style="width:920px;padding-bottom:150px;height:100%;overflow-y:auto">
          <el-col :span="19">
             <el-form :model="parames" size="small" :rules="rules" label-position="left" ref="parames" label-width="94px" class="addForm">
                <el-row style="padding: 0 40px" :gutter="30">
                  <a-collapse :defaultActiveKey="activeNames" :bordered="false">
                    <a-collapse-panel class="marginB10" header="基本信息" key="1">
                      <el-col :span="12" style="margin-top:15px" >
                        <el-form-item label="服务公司:">
                          <el-select style="width:100%" v-model="parames.serviceCompanyId" placeholder="请选择">
                            <el-option v-for="(item,index) in companyData" :key="index" :label="item.providerName" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" style="margin-top:15px">
                        <el-form-item label="收款账户:">
                          <el-input size="small" v-model="parames.receiptAccount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="客户名称:">
                          <el-select style="width:100%" clearable filterable v-model="parames.customerId" placeholder="请选择">
                            <el-option v-for="(item,index) in kehuData" :key="index" :label="item.customerName" :value="item.id"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="付款账号:">
                          <el-input size="small" v-model="parames.paymentAccount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12">
                        <el-form-item label="认领状态:">
                          <el-select style="width:100%" clearable v-model="parames.claimStatus" placeholder="请选择">
                            <el-option v-for="(item,index) in statusData" :key="index" :label="item.desc" :value="item.name"></el-option>
                          </el-select>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="到账金额:">
                          <el-input size="small" v-model="parames.receiptedAmount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="待认领金额:">
                          <el-input size="small" v-model="parames.claimableAmount" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="交易编号:">
                          <el-input size="small" v-model="parames.transactionNumber" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="到账时间:" prop="receiptDate">
                            <el-date-picker
                            style="width:100%"
                            v-model="parames.receiptDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="12" >
                        <el-form-item label="确认时间:" prop="confirmDate">
                            <el-date-picker
                            style="width:100%"
                            v-model="parames.confirmDate"
                            type="date"
                            placeholder="选择日期">
                            </el-date-picker>
                        </el-form-item>
                      </el-col>
                      <el-col :span="16">
                        <el-form-item label="备注信息:">
                          <el-input size="small" type="textarea" v-model="parames.remark" placeholder="请输入"></el-input>
                        </el-form-item>
                      </el-col>
                    </a-collapse-panel>
                    <!-- <a-collapse-panel class="marginB10" header="认领记录" key="2">
                      <el-col :span="24" style="margin-top:15px">
                        <el-row id="addHet">
                          <el-col :span="8">产品名称</el-col>
                          <el-col :span="8">剩余代收</el-col>
                          <el-col :span="8">本次收款</el-col>
                          <el-col :span="24" style="margin-top:15px">
                            <a-collapse :defaultActiveKey="tableKeys" :bordered="false">
                              <a-collapse-panel :key="index" :style="customStyle" v-for="(item,index) in parames.receiptDetailList">
                                <div style="background:#fafafa;margin-left:14px" slot="header">
                                  <el-row>
                                    <el-col :span="12">
                                      <span>合同流水号:</span>
                                      <span>HTU09890029348043</span>
                                    </el-col>
                                    <el-col :span="12" style="text-align:right">
                                      <span class="el-dropdown-link">
                                        <a-icon style="margin: 0 15px;" type="delete" />
                                      </span>
                                    </el-col>
                                  </el-row>
                                </div>
                                <el-row style="padding: 15px" v-for="(itemp,indexp) in item.prodList" :key="indexp">
                                  <el-col :span="8">
                                    <span style="margin-left:15px">{{itemp.name}}</span>
                                  </el-col>
                                  <el-col :span="8">
                                    {{itemp.price1}}
                                  </el-col>
                                  <el-col :span="8">
                                      <el-input v-model.number="itemp.price2" @blur="handleBlur(itemp)" size="small"></el-input>
                                      <p style="color:#f00" v-if="itemp.price2>itemp.price1">输入金额超过最大值</p>
                                  </el-col>
                                </el-row>
                              </a-collapse-panel>
                            </a-collapse>
                          </el-col>
                        </el-row>
                        <el-button icon="el-icon-plus" size="small" @click="handelAddProduct" style="width:100%;margin-top:20px">添加合同</el-button>
                      </el-col>
                    </a-collapse-panel> -->
                  </a-collapse>
                </el-row>
              </el-form>
            </el-col>
            <el-col :span="5" style="position: fixed;top:80px;right:-10px;width:240px">
              <div v-if="dialogData.type == 'edit'">
                <el-button
                  @click="handleCancle"
                  size="small"
                  icon="el-icon-close"
                  style="width:200px;text-align: left;margin-bottom:10px"
                >取消编辑</el-button>
              </div>
            </el-col>
        </el-row>
        
        <div class="from-bottom-box">
          <el-button size="small" type="primary" @click="handleSave">保存</el-button>
          <el-button size="small" @click="handleClose">取消</el-button>
        </div>
      </a-drawer>
    </div>
</template>

<script>
export default {
    props: ['dialogData'],
    data() {
        return {
          customStyle: 'border-radius: 4px;margin-bottom: 8px;border: #f7f7f7 solid 1px;overflow: hidden',
          activeNames: ['1','2'],
          parames: {
            id: '',
            receiptAccount:'',//收款账户,
            customerId:'',//客户名称,
            claimStatus:'',//认领状态,
            receiptedAmount:'',//到账金额,
            paymentAccount:'',//付款账号,
            claimableAmount:'',//待认领金额,
            transactionNumber:'',//交易编号,
            serviceCompanyId:'',//服务公司,
            remark:'',//备注信息,
            receiptDate:'',//到账时间,
            confirmDate:'',//确认时间
          },
          tableKeys: [0,1,2,3],
          hetongData: {
            title: '',
            slectData: [],
            show: false
          },
          rules: {
            // receiptAccountId: [{ required: true, message: '必填', trigger: ['change','blur' ]}],
            // receiptDate: [{ required: true, message: '必填', trigger: ['blur' ]}],
          },
          accountData: [], //公司帐户
          companyData: [], //公司信息
          kehuData: [], //客户信息
          kehuAccountData: [], //客户帐户
          statusData: [] //认领状态
        };
    },
    created() {

    },
    mounted() {

    },
    methods: {
      handleClose () { //关闭弹窗
        this.dialogData.show = false
      },
      handleCancle () { //取消重新编辑
        this.dialogData.show = false
        this.$emit('checkOpen')
      },
      handleDelproduct (index,row) { //删除当前行产品
        this.parames.opportunityProductList.splice(index,1)
      },
      setData () {},
      handleSave () { //保存
        this.$refs['parames'].validate((valid) => {
          this.setData()
          if (valid) {
            if (this.dialogData.type == 'edit') { //修改保存成功
              this.$post(this.$api.postFinanceClaimEdit,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '修改成功'})
                  this.handleClose()
                  this.$emit('checkOpen','1') //重新打开父级弹窗
                }
              })
            } else { //新增
              this.$post(this.$api.postFinanceClaimAdd,this.parames).then(response => {
                if (response.data.succeed) {
                  this.$message({ type:'success',message: '保存成功'})
                  this.$emit('checkRender')
                  this.handleClose()
                }
              })
            }
            
          }
        })
      },
      render () { //获取详情信息
        this.loading = true
        this.$post(this.$api.postFinanceClaimFind,{
          claimId: this.dialogData.id
        }).then(response => {
          if (response.data.succeed) {
            let data = response.data.data
            this.parames.id = data.id
            this.parames.receiptAccount = data.receiptAccount //收款账户
            this.parames.customerId = data.customerName //客户名称
            this.parames.claimStatus = data.claimStatus //认领状态
            this.parames.receiptedAmount = data.receiptedAmount //到账金额
            this.parames.paymentAccount = data.paymentAccount//付款账号
            this.parames.claimableAmount = data.claimableAmount //待认领金额
            this.parames.transactionNumber = data.transactionNumber //交易编号
            this.parames.serviceCompanyId = data.serviceCompanyId //服务公司
            this.parames.remark = data.remark //备注信息
            this.parames.receiptDate = data.receiptDate //到账时间
            this.parames.confirmDate = data.confirmDate //确认时间
            setTimeout(() => {
              this.loading = false
            }, 200);
          }
        })
      },
      getAccount (id) {//获取服务商帐户数据
        this.$post(this.$api.postProviderAccountList,{
          providerId: id,
        }).then(response => {
          if (response.data.succeed) {
            this.accountData = response.data.data
          }
        })
      },
      getKehu() { //获取客户下拉数据
        this.$post(this.$api.postCustomerCoreList,{
          tabKey: 'all',
        }).then(response => {
          if (response.status == 200) {
              this.kehuData = response.data.data
          }
        })
      },
      postProviderList () { //获取所有服务商
        this.$post(this.$api.postProviderList).then(response => {
          if (response.data.succeed) {
            this.companyData = response.data.data
          }
        })
      },
      resetData () { //重置数据
        this.parames.id = ''
        this.parames.receiptAccount = '' //收款账户
        this.parames.customerId = '' //客户名称
        this.parames.claimStatus = '' //认领状态
        this.parames.receiptedAmount = '' //到账金额
        this.parames.paymentAccount = '' //付款账号
        this.parames.claimableAmount = '' //待认领金额
        this.parames.transactionNumber = ''//交易编号
        this.parames.serviceCompanyId = '' //服务公司
        this.parames.remark = '' //备注信息
        this.parames.receiptDate = '' //到账时间
        this.parames.confirmDate = '' //确认时间
        this.$refs.parames.resetFields()
      }
    },
    components: {
    },
    computed: {
      changeDialog () {
        return this.dialogData.show
      }
    }, 
    watch: {
      changeDialog: {
        handler (curVal, oldVal) {
          if (curVal) {
            this.$utils.getEnumberation('postFinanceClaimClaimStatus','statusData',this) //认领状态
            this.postProviderList()
            this.getKehu()
            if (this.dialogData.type == 'edit') {
              this.render()
            }
          } else {
            this.resetData()
          }
        }
      }
    },
};
</script>

<style>
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header .ant-collapse-arrow{
  left: 15px;
}
#addHet .ant-collapse > .ant-collapse-item > .ant-collapse-header{
  background: #fafafa;
}
#addHet .ant-collapse > .ant-collapse-item{
  border-bottom: #f7f7f7 solid 1px!important;
}
</style>
